<template>
  <div>
    <el-dialog title="选择试卷" :visible="true" width="880px" top="10px" :close-on-click-modal="false" :before-close="close">
      <el-form ref="searchTopic" :inline="true" :model="search" size="mini">
        <el-form-item label="试卷类型"><edu-select :value.sync="search.paper_type" :options="options.paper_type" :args="{}" /></el-form-item>
        <el-form-item label="试卷分类">
          <el-cascader v-model="cateValue" :options="options.category" :props="{ expandTrigger: 'hover' }" clearable @change="handleChange" />
        </el-form-item>
        <el-form-item label="试卷名称"><el-input v-model="search.title" placeholder="请输入试卷名称关键字" /></el-form-item>
        <el-form-item><el-button @click="loadPaper">搜索</el-button></el-form-item>
      </el-form>
      <div>
        <el-table ref="topicTable" v-loading.lock="loading" :data="datas" style="width: 100%" height="400" row-key="id" @selection-change="handleSelectChange">
          <el-table-column type="selection" min-width="50" :selectable="checkSelectable" />
          <el-table-column prop="title" label="名称" />
          <el-table-column prop="cate_title" label="分类" width="180" />
          <el-table-column prop="paper_type_text" label="类型" />
          <el-table-column prop="total_count" label="总题数" />
          <el-table-column prop="total_score" label="总分数" />
        </el-table>
        <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
      </div>
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" :disabled="disabled" @click="choose">确认</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduSelect from '@public/form/select.vue';
import { Loading } from 'element-ui';
export default {
  components: {
    EduSelect
  },
  inject: ['reload'],
  data() {
    return {
      search: {
        // 试卷类型
        paper_type: '',
        // 试卷分类
        category: '',
        // 试卷关键字[名称]
        title: ''
      },
      papers: [],
      options: {
        // 试卷类型
        paper_type: [],
        // 试卷分类
        category: []
      },
      paginate: {
        count: 10,
        page: 1
      },
      response: null,
      loading: true,
      disabled: false,
      cateValue: []
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  created() {
    this.loadOptions();
    this.loadPaper();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    handleChange: function(value) {
      this.cateValue = value;
      this.search.category = ',' + value.join(',') + ',';
    },
    choose() {
      var ids = this.papers.map(paper => paper.id);
      // 是否有选择
      if (ids.length !== 0) {
        // 提交到后台保存
        this.disabled = true;
        const loadingInstance = Loading.service({ text: '保存中...' });
        this.$http.post(
          '/exam/admin/module/' + this.$route.params.id + '/examination/create',
          {
            papers: ids
          },
          response => {
            loadingInstance.close();
            this.$message.success(response.msg, _ => {
              this.reload();
            });
          },
          error => {
            this.$message.error(error.msg);
          },
          false
        );
      } else {
        this.$emit('close');
      }
    },

    loadOptions() {
      this.$http.get(
        '/exam/admin/module/' + this.$route.params.id + '/examination/choose/options',
        {},
        response => {
          const {
            data: { options }
          } = response;
          this.options = options;
        },
        _ => {},
        false
      );
    },
    loadPaper() {
      this.loading = true;
      this.$http.get(
        '/exam/admin/module/' + this.$route.params.id + '/examination/choose/list',
        {
          ...this.search,
          ...this.paginate
        },
        response => {
          this.response = response;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    checkSelectable(row) {
      return !row.checked;
    },
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadPaper();
    },
    // 单行选中与取消事件
    handleSelectChange: function(selection) {
      this.papers = selection;
    }
  }
};
</script>

<style></style>
